<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:include="admin/layout">

</head>
<body class="gray-bg" data-controller="user" data-action="list">
	<div class="wrapper wrapper-content" style="padding: 40px;">
   		 <div id="page-wrapper" style="min-height: 516px;">
            <div class="row">
                <div class="col-lg-12">
                    <h3 class="page-header">后台帐号管理</h3>
                </div>
                <!-- /.col-lg-12 -->
            </div>
             <form id="user_form" th:action="${'/user/list'}" class="form-inline" method="post" th:object="${users}">
          		<input id="pageNo" name="pageNum" type="hidden" th:value="${page.pageNum}"/>
          		<input id="pageSize" name="pageSize" type="hidden" th:value="${page.pageSize}"/>
          		<p>
          			<div class="btn-group">
              			<button type="button" class="btn btn-primary btn-sm" onclick="toAdd()">
              			<i class="icon-plus-sign icon-white"></i> 新增</button>
          			</div>
          			<div class="form-group station-select-group" style="margin-left: 10%">
              			<label for="_____">姓名：</label>
              				<div class="form-group">
                  				<div class="input-group">
                      				<input class="form-control input-sm" id="name" name="name" th:value="*{name}" type="text" style="border-radius:5px;"/>
                  				</div>
              				</div>
          			</div>
          			<div class="form-group station-select-group" style="margin-left: 2%">
              			<label for="_____">角色：</label>
              				<div class="form-group">
                  				<div class="input-group">
                  					<input id="sssstatus" th:value="*{role}" type="hidden"/>
                      				<select class="form-control input-sm" type="text" onchange="changeSelect();" name="role" id="sstatus" style="border-radius:5px;">
                      					<option value="0">--请选择--</option>
                      					<option value="1">系统管理员</option>
                      					<option value="2">文章录入员</option>
                      					<option value="3">文章超级管理员</option>
                      					<option value="4">专栏管理员</option>
                      				</select>
                  				</div>
              				</div>
          			</div>
          			<div class="btn-group" style="margin-left: 2%">
              			<button type="submit" class="btn btn-primary btn-sm" id="search">
              			<i class="icon-search icon-white"></i>  快速搜索</button>
          			</div>
          			
          			<div class="btn-group" >
              			<button type="button" class="btn btn-primary btn-sm" id="reset" onclick="resets()">
              			  重置</button>
          			</div>
          			
          		</p>
      		</form>
      <div class="table-scrollable" style="border-radius: 5px;">
        <table class="table table-striped table-bordered table-condensed">
            <thead>
            	<tr>
                	<th style="text-align: center;">ID</th>
                	<th style="text-align: center;">姓名</th>
                	<th style="text-align: center;">年龄</th>
                	<th style="text-align: center;">权限</th>
                	<th style="text-align: center;">操作</th>
            	</tr>
            </thead>
            <tbody>
            	<tr th:each="users:${page.list}">
            		<td th:text="${users.id}" style="text-align: center;"></td>
            		<td th:text="${users.name}" style="text-align: center;"></td>
            		<td th:text="${users.age}" style="text-align: center;"></td>
            		<!--  
            		<td th:text="${#dates.format(account.startdate,'yyyy-MM-dd')}" style="text-align: center;"></td>
            		<td th:text="${#dates.format(account.enddate,'yyyy-MM-dd')}" style="text-align: center;"></td>
            		-->
            		<td th:if="${users.role}==2" style="text-align: center;font-weight:bold;color: blue;">
            			文章管理员
            		</td>
            		<td th:if="${users.role}==1" style="text-align: center;font-weight:bold;color: red;">
            			系统管理员
            		</td>
            		<td th:if="${users.role}==3" style="text-align: center;font-weight:bold;color: green;">
            			文章超级管理员
            		</td>
            		<td th:if="${users.role}==4" style="text-align: center;font-weight:bold;color: green;">
            			专栏管理员
            		</td>
					<td th:if="${users.role}==2 or ${users.role}==3 or ${users.role}==4">
					 	<li class="dropdown" style="list-style-type:none;text-align: center;">
                    		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        			<i class="fa fa-edit fa-fw" ></i>
                    		</a>
                    		<ul class="dropdown-menu" style="min-width: 100px;">
                        		<li>
                        		<a href="#" th:href="@{/user/toEdit(id=${users.id})}"><i class="fa fa-edit fa-fw"></i> 编辑用户</a></li>
                        		<li>
                        		<a href="#" th:href="@{/user/delete(id=${users.id})}"><i class="fa fa-edit fa-fw"></i> 删除用户</a></li>
                    		</ul>
                		</li>
					</td>
            	</tr>
            </tbody>
        </table>
   	 </div>
     <div class="row" th:include="admin/pagination" th:with="page=${page}"></div>
     </div>
    </div>
	<script type="text/javascript" th:src="@{'/admin/js/user-list.js'}"></script>
	<script type="text/javascript">
	$(document).ready(function(){
	 		var sssstatus=$("#sssstatus").val();
	 		if(sssstatus!=null){
	 			$("#sstatus").val(sssstatus);
	 		}else{
	 			$("#sstatus").val(0);
	 		}
	 	});
	
	
	 	function changeSelect(){
	 		var _form = $("#user_form");
			_form.submit();
	 	}
		function toAdd(){
			window.location.href="/user/toAdd";
		}
		function resets(){
			$("#name").val("");
			$("#sstatus").val(0);
			changeSelect();
		}
	</script>
</body>
</html>